import {onMounted, onUnmounted, Ref, ref} from "vue";

//是否点击到非dropdown位置
const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {
    const isClickOutside = ref(false)
    const handler = (e: MouseEvent) => {
        if (elementRef.value) {
            if (elementRef.value.contains(e.target as HTMLElement)) {
                isClickOutside.value = false
            } else {
                isClickOutside.value = true
            }
        }
    }
    //监听点击事件，并执行handler方法
    onMounted(() => {
        document.addEventListener('click', handler)
    })

    //卸载监听click
    onUnmounted(() => {
        document.removeEventListener('click', handler)
    })
    return isClickOutside
}

export default useClickOutside